<template>
  <div class="school">
    <h2>学校名称：{{name}}</h2>
    <h2>地址：{{address}}</h2>
    <h2>学生姓名：{{studentName}}</h2>
  </div>
</template>

<script>

export default {
    name: 'School',
    data() {
        return {
            name: 'sgg',
            address: 'bj', 
            studentName: '',
        }
    },
    methods: {
    },
    mounted() {
      // console.log('School', this.x) //可以访问到x
      //在x组件上绑定hello事件，并设置回调，回调要用箭头函数，保证里面的this是外层的本组件vc实例
      this.$bus.$on('hello', (data)=>{
        console.log('我是School组件，我收到了数据', data)
        this.studentName = data
      });
    },
    beforeDestroy() {
      //在组件销毁时解绑全局事件总线上的事件
      this.$bus.$off('hello')
    }
}
</script>

<style scoped>
  .school{
    background-color: skyblue;
    padding: 5px;
    margin-top: 20px;
  }
</style>